<template>
  <div class='cardlist'>
    <el-card class="box-card">
      <div class="card-item">
        <p style='line-height:50px;'>数据源</p>
        <div class='cont' style='margin-top: -10px'>
          <p class='datasum'><span style='color:#3890df'>{{dataSouce.num1}}</span>/<span>{{dataSouce.num2}}</span></p>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="card-item">
        <p>ES</p>
        <div class='cont'>
          <p>
            <span style='color:#1bb393'>正常</span>/
            <span style='color:#eb6262'>告警</span>/
            <span style='color:#f8ac58'>异常</span>
          </p>
          <p class='datasum'>
            <span style='color:#1bb393'>{{dataEs.num1}}</span>/
            <span style='color:#eb6262'>{{dataEs.num2}}</span>/
            <span style='color:#f8ac58'>{{dataEs.num3}}</span>
          </p>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="card-item">
        <p>Hadoop</p>
        <div class='cont'>
          <p>Node</p>
          <p class='datasum'><span style='color:#fe7c60'>{{dataHadoop.num1}}</span>/<span>{{dataHadoop.num2}}</span></p>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="card-item">
        <p>PG</p>
        <div class='cont'>
          <div class='card-left'>
            <p>DataBase</p>
            <p class='datasum'><span style='color:#6554c0'>{{dataPG.num1}}</span></p>
          </div>
          <div class='card-right'>
            <p>Scheme</p>
            <p class='datasum'><span style='color:#6554c0'>{{dataPG.num2}}</span></p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="card-item">
        <p>DSB</p>
        <div class='cont'>
          <div class='card-left'>
            <p>转换数</p>
            <p class='datasum'><span style='color:#ffbb00'>{{dataDSB.num1}}</span></p>
          </div>
          <div class='card-right'>
            <p>作业数</p>
            <p class='datasum'><span style='color:#ffbb00'>{{dataDSB.num2}}</span></p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataSouce: {
          num1: '14',
          num2: '17'
        },
        dataEs: {
          num1: '10',
          num2: '10',
          num3: '10'
        },
        dataHadoop: {
          num1: '3',
          num2: '3'
        },
        dataPG: {
          num1: '688',
          num2: '716'
        },
        dataDSB: {
          num1: '1',
          num2: '1'
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .cardlist {
    height: 156px;
    margin-left: -20px;
    .el-card {
      width: calc(20% - 20px);
      margin-left: 20px;
      float: left;
      font-size: 18px;
      cursor: pointer;
      &:hover {
        border-color: #009ce3;
      }
      .card-item {
        text-align: center;
        height: 110px;
        position: relative;
        &>p {
          color: #666;
          line-height: 25px;
          margin-bottom: 10px;
        }
        .cont {
          font-weight: 500;
          font-size: 14px;
          color: #666;
          .card-left {
            float: left;
            width: 50%;
            border-right: 1px solid #dcdcdc;
          }
          .card-right {
            float: left;
            width: 50%;
          }
        }
        .datasum {
          margin-top: 10px;
          font-size: 30px;
        }
      }
    }
  }
</style>